import React, { useState, useEffect, useRef } from 'react';
import { useNavigate } from 'react-router-dom';
import { message } from 'antd';

const Header = ({ 
  activeNavItem = '', 
  styles,
  onStoryClick,
  onLearningClubClick 
}) => {
  const navigate = useNavigate();
  const [isMenuOpen, setIsMenuOpen] = useState(false);
  const [windowSize, setWindowSize] = useState({
    width: window.innerWidth,
    height: window.innerHeight
  });
  const menuRef = useRef(null);

  // 响应式断点
  const isMobile = windowSize.width < 768;
  const isTablet = windowSize.width >= 768 && windowSize.width <= 1024;

  // 窗口大小变化监听
  useEffect(() => {
    const handleResize = () => {
      setWindowSize({
        width: window.innerWidth,
        height: window.innerHeight
      });
    };

    window.addEventListener('resize', handleResize);
    return () => window.removeEventListener('resize', handleResize);
  }, []);

  // 退出登录
  const handleLogout = () => {
    localStorage.removeItem('currentUser');
    localStorage.removeItem('token');
    message.success('已成功退出登录');
    setTimeout(() => {
      navigate('/login');
    }, 1000);
  };

  // 切换菜单
  const toggleMenu = () => {
    setIsMenuOpen(!isMenuOpen);
  };

  // 点击外部关闭菜单
  useEffect(() => {
    const handleClickOutside = (event) => {
      if (menuRef.current && !menuRef.current.contains(event.target)) {
        setIsMenuOpen(false);
      }
    };

    if (isMenuOpen) {
      document.addEventListener('mousedown', handleClickOutside);
    }

    return () => {
      document.removeEventListener('mousedown', handleClickOutside);
    };
  }, [isMenuOpen]);

  return (
    <header className={styles['header']}>
      <div className={styles['header-content']}>
        {/* Logo */}
        <div className={styles['logo']} onClick={() => navigate('/')}>
          <div className={styles['logo-icon']}>
            <div className={`${styles['logo-square']} ${styles['red']}`}></div>
            <div className={`${styles['logo-square']} ${styles['green']}`}></div>
            <div className={`${styles['logo-square']} ${styles['blue']}`}></div>
            <div className={`${styles['logo-square']} ${styles['yellow']}`}></div>
          </div>
          <span className={styles['logo-text']}>智绘师</span>
        </div>

        {/* Navigation Links */}
        <nav className={styles['nav-links']}>
          <a 
            className={`${styles['nav-link']} ${activeNavItem === 'home' ? styles['active'] : ''}`}
            onClick={() => navigate('/')}
            style={{ cursor: 'pointer' }}
          >
            首页
          </a>
          <a className={styles['nav-link']}>
            学习机
          </a>
          <a className={styles['nav-link']}>
            智绘师网校
          </a>
          <a 
            className={`${styles['nav-link']} ${activeNavItem === 'courses' ? styles['active'] : ''}`}
            onClick={() => navigate('/coursess')}
            style={{ cursor: 'pointer' }}
          >
            培优素养课
          </a>
          <a 
            className={`${styles['nav-link']} ${activeNavItem === 'books' ? styles['active'] : ''}`}
            onClick={() => navigate('/books')}
            style={{ cursor: 'pointer' }}
          >
            智能图书
          </a>
          <a className={styles['nav-link']}>
            九章大模型
          </a>
          <a 
            className={styles['nav-link']}
            onClick={onStoryClick}
            style={{ cursor: 'pointer' }}
          >
            我们的故事
          </a>
        </nav>

        {/* Right Side Menu */}
        <div className={styles['menu-toggle']} onClick={toggleMenu} ref={menuRef}>
          <div className={styles['hamburger']}>
            <span></span>
            <span></span>
            <span></span>
          </div>
          <span className={styles['menu-text']}>全部</span>
          
          {/* 抽屉菜单 */}
          {isMenuOpen && (
            <div className={styles['drawer-overlay']} onClick={toggleMenu}>
              <div 
                className={`${styles['drawer-menu']} ${
                  isMobile ? styles['mobile-drawer'] : 
                  isTablet ? styles['tablet-drawer'] : 
                  styles['desktop-drawer']
                }`} 
                onClick={(e) => e.stopPropagation()}
              >
                <div className={styles['drawer-header']}>
                  <span className={styles['drawer-title']}>智绘师</span>
                  <button className={styles['drawer-close']} onClick={toggleMenu}>×</button>
                </div>
                
                <div className={styles['drawer-content']}>
                  <div className={styles['menu-section']}>
                    <div className={styles['menu-item']}>选课</div>
                    <div 
                      className={styles['menu-item']}
                      onClick={onLearningClubClick}
                      style={{ cursor: 'pointer' }}
                    >
                      学习俱乐部
                    </div>
                    <div className={styles['menu-item']}>课程表</div>
                    <div className={styles['menu-item']}>智绘师移动应用</div>
                    <div 
                      className={styles['menu-item']}
                      onClick={() => { navigate('/books'); setIsMenuOpen(false); }}
                      style={{ cursor: 'pointer' }}
                    >
                      智能图书
                    </div>
                    <div 
                      className={styles['menu-item']}
                      onClick={() => { navigate('/coursess'); setIsMenuOpen(false); }}
                      style={{ cursor: 'pointer' }}
                    >
                      精品课臻选
                    </div>
                    <div className={styles['menu-item']}>精品课讲堂</div>
                    <div className={styles['menu-item']}>上海智绘课堂</div>
                  </div>
                  
                  <div className={styles['menu-divider']}></div>
                  
                  <div className={styles['menu-section']}>
                    <div className={styles['menu-item']}>关于智绘师</div>
                    <div className={styles['menu-item']}>帮助中心</div>
                  </div>
                  
                  <div className={styles['drawer-footer']}> 
                    <button 
                      className={styles['register-btn']}
                      onClick={handleLogout}
                    >
                      <span className={styles['btn-text']}>退出登录</span>
                    </button>
                  </div>
                </div>
              </div>
            </div>
          )}
        </div>
      </div>
    </header>
  );
};

export default Header;